<!-- 当前模块：首页 -->
<template>
  <div class="page_index">
    <navTitle use-slot>
      <div class="index-top" @click="handleShow">
        <img :src="headImgUrl" alt="" srcset="">
        <span>{{ roomIdName || '游客' }}，您好</span>
      </div>
    </navTitle>
    <div class="page_index-container">
      <!-- 首页顶部搜索区域 -->
      <div class="banner-container">
        <!-- 轮播图区域 -->
        <swiper autoplay circular style="height: 100%">
          <block v-for="item in bannerList" :key="item.id" >
            <swiper-item>
              <img :src="item.src" />
            </swiper-item>
          </block>
        </swiper>
      </div>
      <div class="grid-module">
        <div class="aside-left" @click="handleClick({path: '/pages/retire/pages/mapList/main', id: 8})">
          <div class="img-container">
            <img src="../../../static/images/29.png" alt="">
            <div class="img-desc-title">养老机构</div>
          </div>
        </div>
        <div class="aside-divide"></div>
        <div class="aside-center" @click="handleClick({path: '/pages/retire/pages/mapList/main', id: 8})">
          <div class="img-container">
            <img src="../../../static/images/31.png" alt="">
            <div class="img-desc-title">福利中心</div>
          </div>
        </div>
        <div class="aside-divide"></div>
        <div class="aside-right" @click="handleClick({path: '/pages/retire/pages/mapList/main', id: 7})">
          <div class="img-container">
            <img src="../../../static/images/index/grid5.png" alt="">
            <div class="img-desc-title">幸福食堂</div>
          </div>
        </div>
      </div>
      <!-- 功能模块入口 -->
      <div class="grid-container">
        <!-- <div class="more_btn"><span @click="handleClick({path: '/pages/service/main'})">>>更多</span></div> -->
        <van-grid column-num="4" clickable :border="false" style="width: 100%">
          <van-grid-item use-slot v-for="item in gridList" :key="item.id" @click="handleClick(item)">
            <img :src="item.icon" alt="" />
            <div class="item-title">{{ item.title }}</div>
          </van-grid-item>
        </van-grid>
      </div>
      <div style="height: 12px; background: #f5f5f5;"></div>
      <indexNews ref="news"></indexNews>
    </div>
    <van-popup :show="dialogObj.visible" position="left" @close="dialogObj.visible = false;">
      <mine/>
    </van-popup>
    <div class="float-div" @click="handleClick({path: '/pages/retire/pages/helpPhone/main'})">
      <img src="../../../static/images/index/phone.png" alt="">
    </div>
  </div>
</template>

<script>
import {api, apiServe} from "../../utils/api"
import indexNews from "./indexNews"
import {publicApiFn} from "../../mixins/publicApiFn"
import mine from '../../component/mine.vue'
export default {
  components: {indexNews, mine},
  mixins: [publicApiFn],
  data () {
    return {
      headImgUrl: require('../../../static/images/index/person.png'),
      bannerList: [
        {id: 1, src: 'https://n.sinaimg.cn/sinakd2020710s/214/w2048h1366/20200710/fb5d-iwasyei8773246.jpg'},
        {id: 2, src: 'https://5b0988e595225.cdn.sohucs.com/images/20190720/a269abc707f54ba999a9eed71cccc608.jpeg'},
        {id: 3, src: 'https://img.zcool.cn/community/01ae1f5b050deea801218cf40466b7.jpg@1280w_1l_2o_100sh.jpg'},
        {id: 4, src: 'https://x0.ifengimg.com/ucms/2022_10/3D9FD434A1EB7AC06E948A6BDB2B09AAD8EB066A_size906_w3300_h2080.jpg'}
      ],
      gridList: [
        {id: 1, title: "家政服务", icon: require("../../../static/images/index/grid1.png"), path: "/pages/404/main"},
        {id: 2, title: "代购代办", icon: require("../../../static/images/index/grid2.png"), path: "/pages/404/main"},
        {id: 3, title: "助医服务", icon: require("../../../static/images/index/grid3.png"), path: "/pages/404/main"},
        // {id: 4, title: "健康咨询", icon: require("../../../static/images/index/grid4.png"), path: "zsh"},
        {id: 5, title: "养老护具", icon: require("../../../static/images/28.png"), path: "/pages/404/main"},
        {id: 6, title: "网上订餐", icon: require("../../../static/images/26.png"), path: "/pages/404/main"},
        {id: 7, title: "补助申请", icon: require("../../../static/images/24.png"), path: "/pages/404/main"},
        {id: 8, title: "意见反馈", icon: require("../../../static/images/22.png"), path: "/pages/404/main"},
        {id: 9, title: "更多", icon: require("../../../static/images/index/more.png"), path: "/pages/retire/pages/service/main"}
      ],
      dialogObj: {
        visible: false,
        actions: []
      },
    }
  },
  onShow() {
    // this.getListFn();
  },
  onLoad(option) {
    
  },
  watch: {
    userInfo: {
      handler(newVal) {
        this.headImgUrl = newVal.avatar || require("../../../static/images/index/person.png");
      },
      immediate: true
    }
  },
  computed: {
    userInfo() {
      return this.$store.getters.userInfo || {};
    },
    isLogin() {
      return this.$store.getters.isLogin
    },
    roomId() {
      return this.$store.getters.roomId;
    },
    roomIdName() {
      return this.$store.getters.roomIdName;
    },
    communityId() {
      this.$refs.news && this.$refs.news.getTabListFn();
      return this.$store.getters.communityId;
    }
  },
  onPullDownRefresh() {
    wx.startPullDownRefresh({
      success: res=>{
        // this.getListFn();
      },
      complete: () => {
        wx.stopPullDownRefresh();
      }
    })
  },
  methods: {
    async handleClick(obj) {
      wx.navigateTo({
        url: obj.path
      })
    },
    handleShow() {
      this.dialogObj.visible = true;
    }
  },
  onShareAppMessage() {
    return {
      title: '智慧养老',
      path: '/pages/auth/main',
      from: "menu" 
    }
  }
}
</script>

<style scoped lang="scss">
.page_index {
  background: #f5f5f5;
  .page_index-container {
    padding: 0 0 24rpx;
    
  }
  .index-top {
    font-size: 14px;
    padding-left: 24rpx;
    img {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      border: 1rpx solid #999;
      vertical-align: middle;
      margin-right: 24rpx;
    }
  }
  .banner-container {
    width: 100%;
    height: 160px;
    background: #fff;
    overflow: hidden;
    margin-bottom: 12px;
    padding: 24rpx 0;
    ._swiper {
      width: calc(100% - 48rpx);
      margin: 0 auto;
      border-radius: 8px;
      overflow: hidden;
    }
    img {
      width: 100%;
      height: 100%;
      border-radius: 8px;
    }
  }
  .grid-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    box-sizing: border-box;
    margin-top: 12px;
    img {
      width: 40px;
      height: 40px;
      margin-bottom: 6px;
      margin-top: 6px;
    }
    .item-title {
      font-size: 12px;
      line-height: 24px;
    }
    .more_btn {
      width: 100%;
      height: 36px;
      text-align: right;
      background: #fff;
      padding-right: 24rpx;
      padding-top: 12px;
      span {
        padding: 2px 5px;
        border: 1rpx solid #eee;
        border-radius: 12px;
        box-shadow: 0 0 5px #999;
        margin-bottom: 12px;
      }
    }
  }
  .grid-module {
    display: flex;
    height: 96px;
    flex-wrap: nowrap;
    align-items: center;
    background: #fff;
    padding: 12px 24rpx;
    .aside-left {
      height: 100%;
      flex: 1;
      display: flex;
      font-size: 22rpx;
      color: #999;
      display: flex;
      align-items: center;
      background: linear-gradient(100deg, #dbb5fb,#dcbff3, #e8d4f9);
      background-size: cover;
      border-radius: 4px;
    }
    .aside-center {
      height: 100%;
      flex: 1;
      display: flex;
      font-size: 22rpx;
      color: #999;
      display: flex;
      align-items: center;
      background-image: url("../../../static/images/index/module1.png");
      background-repeat: no-repeat;
      background-size: cover;
      border-radius: 4px;
    }
    .aside-divide {
      width: 12px;
      height: 100%;
      flex-shrink: 0;
    }
    .aside-right {
      height: 100%;
      flex: 1;
      display: flex;
      font-size: 22rpx;
      color: #999;
      display: flex;
      align-items: center;
      background-image: url("../../../static/images/index/module2.png");
      background-repeat: no-repeat;
      background-size: cover;
      border-radius: 4px;
    }
    .img-container {
      width: 100%;
      text-align: center;
      img {
        width: 80rpx;
        height: 80rpx;
      }
      .img-desc-title {
      padding-top: 12rpx;
        color: #333;
      }
    }
    
  }
  .float-div {
    position: fixed;
    bottom: 20vh;
    right: 24rpx;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 5px #999;
    z-index: 900;
    text-align: center;
    display: flex;
    align-items: center;
    opacity: 0.6;
    img {
      width: 24px;
      height: 24px;
      margin: 0 auto;
    }
  }
}
</style>
<style>
.van-grid-item__content {
  padding: 6px 0 !important;
}
</style>
